<template>
  <HModal cancel-text="取消" ok-text="确定" @ok="handleOK" :height="600"
          :width="800" :visible="visible" @cancel="close" title="用户任务属性">
    <div class="user-task-config-wrapper">
      <Section title="基本信息">
        <RowAttribute label="任务名称" :labelWidth="labelWidth">
          <Input v-model="userTaskProperties.taskName" placeholder="请输入任务名称"/>
        </RowAttribute>

        <RowAttribute label="是否知会" :labelWidth="labelWidth">
          <Select v-model="userTaskProperties.notify"
                  placeholder="是否知会">
            <SelectOption :value="1">是</SelectOption>
            <SelectOption :value="0">否</SelectOption>
          </Select>
        </RowAttribute>

        <RowAttribute v-if="userTaskProperties.notify === 0" label="执行方式" :labelWidth="labelWidth">
          <Select v-model="userTaskProperties.executeWay"
                  @change="executeWayChange" placeholder="请选择执行方式">
            <SelectOption value="single">单用户</SelectOption>
            <SelectOption value="multiCompetition">竞争审批</SelectOption>
            <SelectOption value="multiSequence">多人依次执行</SelectOption>
            <SelectOption value="multi">多人同时审批</SelectOption>
          </Select>
        </RowAttribute>

        <RowAttribute v-if="(userTaskProperties.executeWay === 'multiSequence'
                          || userTaskProperties.executeWay === 'multi') && userTaskProperties.notify === 0"
                      label="结束阈值" :labelWidth="labelWidth">
          <RowWrapper>
            <InputNumber v-model="userTaskProperties.executeThreshold"
                         :formatter="value => `${value}%`" style="flex: 1"
                         :parser="value => value.replace('%', '')"
                         :min="0" :max="100" placeholder="请输入结束阈值"/>
            <span style="margin-left: 10px">(向下取整加1)</span>
          </RowWrapper>
        </RowAttribute>

        <RowAttribute v-if="userTaskProperties.notify === 0" label="审批按钮权限" :labelWidth="labelWidth">
          <AuthSelector :service="service" :form-type="formType" v-model="userTaskProperties.actionAuth"/>
        </RowAttribute>

        <RowAttribute v-if="userTaskProperties.notify === 0" label="手动指定审批人" :labelWidth="labelWidth">
          <Select v-model="userTaskProperties.manualSelectUser"
                  placeholder="是否手动指定审批人">
            <SelectOption :value="1">是</SelectOption>
            <SelectOption :value="0">否</SelectOption>
          </Select>
        </RowAttribute>

        <RowAttribute v-if="userTaskProperties.notify === 0" label="自动通过" :labelWidth="labelWidth">
          <Select v-model="userTaskProperties.autoComplete"
                  placeholder="是否支持自动通过">
            <SelectOption :value="1">是</SelectOption>
            <SelectOption :value="0">否</SelectOption>
          </Select>
        </RowAttribute>

        <RowAttribute v-if="userTaskProperties.notify === 0" label="强制手签" :labelWidth="labelWidth">
          <Select v-model="userTaskProperties.mustSignature"
                  placeholder="是否需要强制手签">
            <SelectOption :value="1">是</SelectOption>
            <SelectOption :value="0">否</SelectOption>
          </Select>
        </RowAttribute>

        <RowAttribute style="align-items: center !important;" label="经过此节点不允许撤回" :labelWidth="labelWidth">
          <PassNodeCannotWithdrawInput v-model="userTaskProperties.passNodeCannotWithdraw"/>
        </RowAttribute>

        <RowAttribute label="不允许撤回的原因" v-show="userTaskProperties.passNodeCannotWithdraw" :labelWidth="labelWidth">
          <TextArea placeholder="不允许撤回的原因" v-model="userTaskProperties.passNodeCannotWithdrawMessage"/>
        </RowAttribute>

        <RowAttribute label="节点类型" :labelWidth="labelWidth">
          <UserTaskTypeSelector :service="service" v-model="userTaskProperties.userTaskType" defaultValue="col" placeholder="请输入备注"/>
        </RowAttribute>

        <RowAttribute label="备注" :labelWidth="labelWidth">
          <TextArea v-model="userTaskProperties.remark" placeholder="请输入备注"/>
        </RowAttribute>
      </section>

      <Section title="用户配置">
        <component ref="refUserConfig" :is="renderUserConfig(userTaskProperties.userConfigs)"/>
      </Section>

      <Section title="视图相关配置" v-if="taskViewAndAuthConfig">
        <component ref="taskViewAndAuthConfig" :is="renderTaskViewAndAuthConfig(userTaskProperties)"/>
      </Section>
      <Section title="视图相关配置" v-else>
        <RowWrapper>
          <RowAttribute label="PC视图" :labelWidth="labelWidth">
            <ViewSelector :form-type="formType" :service="service" style="flex: 1" v-model="userTaskProperties.pcView"/>
          </RowAttribute>
          <RowAttribute label="PC权限" :labelWidth="labelWidth">
            <ViewActionSelector :form-type="formType" :service="service" style="flex: 1" v-model="userTaskProperties.pcAction"/>
          </RowAttribute>
        </RowWrapper>

        <RowWrapper>
          <RowAttribute label="移动端视图" :labelWidth="labelWidth">
            <ViewSelector :form-type="formType" :service="service" style="flex: 1" v-model="userTaskProperties.mobileView"/>
          </RowAttribute>
          <RowAttribute label="移动端权限" :labelWidth="labelWidth">
            <ViewActionSelector :form-type="formType" :service="service" style="flex: 1" v-model="userTaskProperties.mobileAction"/>
          </RowAttribute>
        </RowWrapper>
      </Section>

      <Section title="开发配置">
        <RowAttribute label="任务key" :labelWidth="labelWidth">
          <Input v-model="userTaskProperties.taskKey" placeholder="请输入任务key"/>
        </RowAttribute>
        <RowAttribute label="进入前监听器" :labelWidth="labelWidth">
          <ListenerSelector :flowModelInstance="flowModelInstance" v-model="userTaskProperties.beforeEnterListeners"
                            listener-type="userTaskBeforeEnterListener" :service="service"/>
        </RowAttribute>

        <RowAttribute label="进入后监听器" :labelWidth="labelWidth">
          <ListenerSelector :flowModelInstance="flowModelInstance" v-model="userTaskProperties.afterEnterListeners"
                            listener-type="userTaskAfterEnterListener" :service="service"/>
        </RowAttribute>

        <RowAttribute label="每次审批前监听器" :labelWidth="labelWidth">
          <ListenerSelector :flowModelInstance="flowModelInstance" v-model="userTaskProperties.everyBeforeComplete"
                            listener-type="userTaskAfterCompleteListener" :service="service"/>
        </RowAttribute>

        <RowAttribute label="每次审批后监听器" :labelWidth="labelWidth">
          <ListenerSelector :flowModelInstance="flowModelInstance" v-model="userTaskProperties.everyAfterComplete"
                            listener-type="userTaskAfterCompleteListener" :service="service"/>
        </RowAttribute>

        <RowAttribute label="审批结束前监听器" :labelWidth="labelWidth">
          <ListenerSelector :flowModelInstance="flowModelInstance" v-model="userTaskProperties.beforeComplete"
                            listener-type="userTaskAfterCompleteListener" :service="service"/>
        </RowAttribute>

        <RowAttribute label="审批结束后监听器" :labelWidth="labelWidth">
          <ListenerSelector :flowModelInstance="flowModelInstance" v-model="userTaskProperties.afterComplete"
                            listener-type="userTaskAfterCompleteListener" :service="service"/>
        </RowAttribute>
      </Section>
    </div>
  </HModal>
</template>
<script>
import {Input, InputNumber, Modal, notification, Select} from 'ant-design-vue';
import Section from '@/components/Section/Section.vue';
import RowWrapper from '@/components/flow/layout/RowWrapper.vue';
import RowAttribute from '@/components/flow/layout/RowAttribute.vue';
import AuthSelector from '@/components/flow/AuthSelector/AuthSelector.vue';
import Vue from 'vue';
import ListenerSelector from '@/components/flow/ListenerSelector/ListenerSelector.vue';
import ViewSelector from '@/components/flow/ViewSelector/ViewSelector.vue';
import ViewActionSelector from '@/components/flow/ViewSelector/ViewActionSelector.vue';
import {createProps} from '@/utils/index.js';
import HModal from '@/components/HModal/HModal.vue';
import PassNodeCannotWithdrawInput from '@/components/flow/nodeConfiguration/PassNodeCannotWithdrawInput.vue';
import UserTaskTypeSelector from '@/components/flow/nodeConfiguration/UserTaskTypeSelector.vue';
import {createEmptyUserTask} from '@/components/flow/typs/flow';

export default {
  name: 'UserTaskConfiguration',
  components: {
    UserTaskTypeSelector,
    PassNodeCannotWithdrawInput,
    HModal,
    ViewActionSelector,
    ViewSelector,
    ListenerSelector,
    AuthSelector,
    RowAttribute,
    TextArea: Input.TextArea,
    Input,
    InputNumber,
    RowWrapper,
    Section,
    Select,
    SelectOption: Select.Option,
    Modal,
  },
  props: {
    flowModelInstance: createProps(Object),
    userTask: {
      type: Object,
      default: () => createEmptyUserTask(),
    },
    userConfig: {
      type: Object,
      default: () => ({}),
    },
    taskViewAndAuthConfig: {
      type: [Object, Function],
      default: undefined,
    },
    formType: {
      type: String,
      default: undefined,
    },
    service: {
      type: Function,
      default: () => undefined
    }
  },
  data() {
    return {
      visible: false,
      labelWidth: '150px',
      userTaskProperties: {
        taskKey: undefined,
        taskName: undefined,
        remark: undefined,
        notify: undefined,
        executeWay: undefined,
        executeThreshold: undefined,
        actionAuth: undefined,
        manualSelectUser: undefined,
        autoComplete: undefined,
        mustSignature: undefined,
        userConfigs: undefined,

        beforeEnterListeners: undefined, //进入这个节点之前的监听器
        afterEnterListeners: undefined,  //进入这个节点之后的监听器
        beforeComplete: undefined,       //审批完成这个节点之前的监听器
        afterComplete: undefined,        //审批完成这个节点之后的监听器
        everyBeforeComplete: undefined,  //每次审批完成这个节点之前的监听器
        everyAfterComplete: undefined,   //每次审批完成这个节点之后的监听器

        pcView: undefined, //pc视图
        pcAction: undefined, //pc权限
        mobileView: undefined, //移动端视图
        mobileAction: undefined, //移动端权限
        passNodeCannotWithdraw: false, //经过此节点后, 不允许撤回
        passNodeCannotWithdrawMessage: undefined, //经过此节点后, 不允许撤回的原因

        userTaskType: 'col', //协同节点
        exts: {}, //扩展属性
      }
    };
  },
  methods: {
    executeWayChange() {
      this.$nextTick(() => {
        if (this.userTaskProperties.executeWay === 'single'
            || this.userTaskProperties.executeWay === 'multiCompetition') {
          this.userTaskProperties.executeThreshold = 100;
        }
        if (!this.userTaskProperties.executeThreshold)
          this.userTaskProperties.executeThreshold = 100;
      });
    },
    open() {
      this.visible = true;
      this.getProperties();
    },
    getProperties() {
      for (const key in this.userTaskProperties) {
        this.userTaskProperties[key] = this.userTask[key];
      }
    },
    close() {
      this.visible = false;
    },
    handleOK() {
      let message = this.$refs.refUserConfig.check() ||
          (this.$refs.refTaskViewAndAuthConfig && this.$refs.refTaskViewAndAuthConfig.check());
      if (message) {
        return notification.warn({
          message: message,
        });
      }
      for (const key in this.userTaskProperties) {
        this.userTask[key] = this.userTaskProperties[key];
      }

      this.$emit('ok', this.userTask);
      this.close();
    },
    renderTaskViewAndAuthConfig(userTask) {
      return Vue.component('taskViewAndAuthConfig', {
        render: h => h(this.taskViewAndAuthConfig, {
          ref: 'refTaskViewAndAuthConfig',
          props: {userTask}
        }),
        methods: {
          check() {
            return this.$refs.refTaskViewAndAuthConfig.check();
          },
        }
      });
    },
    renderUserConfig(userConfigs) {
      return Vue.component('userConfig', {
        render: h => h(this.userConfig, {
          ref: 'refUserConfig',
          props: {
            value: userConfigs,
            userTask: this.userTask,
            taskViewAndAuthConfig: this.taskViewAndAuthConfig,
            formType: this.formType,
            ctx: this
          }, on: {
            change: (value) => {
              this.userTaskProperties.userConfigs = value;
            }
          }
        }),
        methods: {
          check() {
            return this.$refs.refUserConfig.check();
          },
        }
      });
    },
  }
};
</script>
<style>
.user-task-config-wrapper::-webkit-scrollbar {
  width: 0;
}

.user-task-config-wrapper {
  height: 100%;
  overflow: auto;
  padding: 5px;
}
</style>